<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成表格</title>

    <style>
        a{
            text-decoration: none;
        }
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        td,
        th{
            border: 1px solid #333;

        }
        thead tr{
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
      <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>

        </tbody>
      </table>

      <script>
        //   1 先去准备好学生的数据
        var datas = [
        {
            name:'赵哲',
            subject:'js',
            score:100
        },
        {
            name:'薛靖怡',
            subject:'js',
            score:99
        },
        {
            name:'乔聪雅',
            subject:'js',
            score:98
        },
        {
            name:'孙宇东',
            subject:'js',
            score:97
        }];
        // 2 往tbody 里面创建行 ： 有几个人（通过数组长度得到）就创建几行 
        var tbody = document.querySelector('tbody');
        for(var i = 0; i < datas.length; i++){  //外面的for循环管行 tr
            //  1 创建 tr 行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);

            //  2 行里面创建单元格(跟数据有关系的三个单元格) td 单元格的数量取决于每个对象里面的属性个数 for 循环 遍历对象
            for(var k in datas[i] ){   // 里面的for循环管列 td
                // 创建单元格
                var td = document.createElement('td');
                // 把对象里面的属性值 给 td
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
        }

            // 3 创建有删除两个字的单元格
             var td =document.createElement('td');
             td.innerHTML = '<a href="javascript:;">删除</a>';
             tr.appendChild(td);
            }

            // 4 删除操作开始
            var as = document.querySelectorAll('a');
            for (var i =0; i<as.length; i++){
                as[i].onclick = function(){
                    // 单击a 删除a当前所在的行 (链接的爸爸的爸爸) node.removeChild(child)
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
      </script>



                <!-- for(var k in obj){
                    k 得到的是属性名
                    obj[k] 得到的是属性值
                } -->
</body>
</html>